import React, {useContext} from 'react';
import { Map, APILoader } from '@uiw/react-baidu-map';
import {store} from "../store";
import ReactEcharts from "echarts-for-react";
import 'echarts/map/js/china';

function DetailView() {
    const {state, dispatch} = useContext(store);
    if(state.compare===0 && state.line===0)
        return <div style={{ width: '100%', height: '100%' }}>
            <img src={require('../'+state.year+'.png')} style={{width: '100%', height: '100%'}}/>
        </div>;
    else if(state.compare===1){
        return <div style={{ width: '100%', height: '100%' }}>
            <img src={require('../com.png')} style={{width: '100%', height: '100%'}}/>
        </div>;
    }
    else if(state.line===1){
        let dat=new Array();
        const Cname=['China','Japan','Armenia','Canada','Iceland'];
        for(let k=0;k<5;++k){
            let t=new Array();
            for(let i=0;i<=6;++i){
                for(let j=0;j<state.data[i].length;++j){
                    if(state.data[i][j].Country===Cname[k])
                        t.push(state.data[i][j].Rank);
                }
            }
            dat.push(t);
        }
        console.log(dat);
        const getLine = () => {
            return {
                tooltip:{
                    show:true
                },
                xAxis: {
                    show:true,
                    type: 'category',
                    data:[2015,2016,2017,2018,2019,2020,2021]
                },
                yAxis: {
                    show:true,
                    type: 'value'
                },
                series: [
                {
                    name: Cname[4],
                    data: dat[4],
                    type: 'line',
                    showBackground: true,
                    color:'rgba(100,100,100,1.0)',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                },
                {
                    name: Cname[1],
                    data: dat[1],
                    type: 'line',
                    showBackground: true,
                    color:'rgba(2,134,185,1.0)',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                },
                {
                    name: Cname[2],
                    data: dat[2],
                    type: 'line',
                    showBackground: true,
                    color:'rgba(255,134,255,1.0)',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                },
                {
                    name: Cname[3],
                    data: dat[3],
                    type: 'line',
                    showBackground: true,
                    color:'rgba(25,134,15,1.0)',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                },
                {
                    name: Cname[0],
                    data: dat[0],
                    type: 'line',
                    showBackground: true,
                    color:'rgba(255,134,185,1.0)',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                },
            ]
            };
        };
        return <div>
            <ReactEcharts option={getLine()} />
        </div>
    }
}

export default DetailView;
